<template>
  <div class="draw-manage">
    DrawManage
    <el-form class="draw-manage-query" :model="form" label-width="80px">
      <el-form-item label="商家ID">
        <el-input placeholder="请输入商家ID" clearable v-model="form.searchName"></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select clearable v-model="form.status" placeholder="请选择">
          <el-option label="通过" :value="1"></el-option>
          <el-option label="不通过" :value="2"></el-option>
          <el-option label="待审核" :value="0"></el-option>
          <el-option label="全部" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker
          class="date-picker"
          v-model="form.time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <div class="btn-box">
        <el-button class="search-btn" type="primary" @click="handleSearch">查询</el-button>
        <el-button class="search-btn" plain @click="handleReset">重置</el-button>
      </div>
    </el-form>
    <div class="action-bar">
      <span @click="handleClickReview"><i class="el-icon-edit-outline"></i>批量审核</span>
    </div>
    <el-table class="draw-manage-table" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column :selectable="checkSelectable" align="center" type="selection" width="55"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="凭证">
              <img class="pic" @dblclick="dialogImageUrl=`${imgPath}${props.row.shopimg1}`;dialogVisible=true;" :src="`${imgPath}${props.row.shopimg1}`" alt="">
            </el-form-item>
            <el-form-item label="审核" v-if="props.row.approveState===0">
              <el-button class="search-btn" type="primary" @click="handleClickpass(props.row.id,1)">通过</el-button>
              <el-button class="search-btn" plain @click="handleClickpass(props.row.id,2)">不通过</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="name" label="店铺名称"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" label="店铺图片">
        <template slot-scope="scope">
          <img @dblclick="dialogImageUrl=`${imgPath}${scope.row.shopimg1}`;dialogVisible=true;" class="img" :src="`${imgPath}${scope.row.shopimg1}`" alt="">
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" label="申请时间">
        <template slot-scope="scope">
          <span>{{scope.row.createtime|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="wangid" label="旺旺ID"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="type" label="店铺类别">
        <template slot-scope="scope">
          <span>{{`${scope.row.businesstype}-${scope.row.subtype}`}}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="type" label="所属平台"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" label="店铺地址">
        <template slot-scope="scope">
          <span>{{`${scope.row.addressProvince}${scope.row.addressCity}${scope.row.addressCounty}${scope.row.address}`}}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="approveStr" label="审核状态"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button class="btn" @click="handleClick(scope.row.shoperId)" type="text" size="small">更多</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog title="商家信息" :visible.sync="showmore" width="500px">
      <div class="more-con">
        <p>
          <span class="more-item">商家ID：<span>{{detail.mobile}}</span></span>
          <span class="more-item">注册时间：<span>{{detail.regtime|dateformat('YYYY-MM-DD HH:mm:ss')}}</span></span>
        </p>
        <p>
          <span class="more-item">VIP情况：<span>{{detail.memberValid?'是会员':'非会员'}}</span></span>
          <span class="more-item">到期时间：<span>{{detail.memberEndDate}}</span></span>
        </p>
        <div class="shoper-box" v-for="(item,i) in detail.shopList" :key="i">
          <p>店铺信息({{i+1}})</p>
          <p class="more-left">
            <span class="more-item">店铺名称：<el-button @click="item.shopurl" type="text">{{item.name}}</el-button></span>
            <span class="more-item">所属平台：<span>{{item.type}}</span></span>
          </p>
          <p class="more-left">
            <span class="more-item">旺旺ID：<span>{{item.wangid}}</span></span>
            <span class="more-item">店铺类别：<span>{{`${item.businesstype}/${item.subtype}`}}</span></span>
          </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showmore=false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="备注" :visible.sync="nopassDialog" width="500px">
      <p class="review-box">
        <el-input
          class="text-area-nopass nopass-reason"
          type="textarea"
          autosize
          clearable
          placeholder="请输入不通过的理由"
          v-model="noPassReason">
        </el-input>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="nopassDialog=false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmReview(2,true)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="批量审核" :visible.sync="reviewBox" width="500px">
      <p class="review-box">
        <el-radio-group v-model="passVal">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">不通过</el-radio>
        </el-radio-group>
        <el-input
          class="text-area-nopass"
          v-show="passVal===2"
          type="textarea"
          autosize
          clearable
          placeholder="请输入不通过的理由"
          v-model="noPassVal">
        </el-input>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviewBox=false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmReview(passVal,false)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
const drawManage = namespace('drawManage')

@Component({
  components: { }
})
export default class DrawManage extends Vue {
  @drawManage.Action getShoperDetail
  @drawManage.State shoperDetail
  @drawManage.Action initStoreReview
  @drawManage.Action getShopApprove
  @drawManage.State storeReview
  dialogImageUrl = ''
  dialogVisible = false
  currentPage = 1
  total = 0
  reviewId = null
  pageSize = 10
  passVal = 1
  nopassDialog = false
  noPassVal = ''
  noPassReason = ''
  showmore = false
  reviewBox = false
  multipleSelection = []
  tableData = []
  detail = {
    shoperId: '',
    shopurl: '',
    createtime: '',
    type: ''
  }
  form = {
    status: 0,
    name: '',
    time: ['2000-01-01 00:00:00', '']
  }
  checkSelectable (row) {
    return row.approveState === 0
  }
  handleClickpass (id, val) {
    this.reviewId = id
    if (val === 1) {
      this.handleConfirmReview(1, true)
    } else {
      this.nopassDialog = true
    }
  }
  handleConfirmReview (val, flag) {
    const params = {
      approve: val,
      ids: flag ? [`${this.reviewId}`] : this.multipleSelection.map(v => v.id.toString()),
      reason: flag ? this.noPassReason : this.noPassVal
    }
    this.getShopApprove(params).then(msg => {
      if (msg) {
        this.$message.error(msg)
      } else {
        this.$message.success('审核成功')
        flag ? this.nopassDialog = false : this.reviewBox = false
        this.init()
      }
    }).catch(error => {
      this.$message.error(error)
    })
  }
  handleSearch () {
    this.currentPage = 1
    this.init()
  }
  handleReset () {
    this.form = {
      status: 0,
      name: '',
      time: ['2000-01-01 00:00:00', '']
    }
  }
  handleSelectionChange (val) {
    this.multipleSelection = val
  }
  handleSizeChange (val) {
    this.pageSize = val
    this.init()
  }
  handleCurrentChange (val) {
    this.currentPage = val
    this.init()
  }
  handleClick (n) {
    const params = {
      id: n
    }
    this.getShoperDetail(params).then(msg => {
      if (msg) {
        this.$message.error(msg)
      } else {
        this.detail = this.shoperDetail.data
      }
    }).catch(error => {
      this.$message.error(error)
    })
    this.showmore = true
  }
  created () {
    // this.init()
  }
  handleClickReview () {
    if (this.multipleSelection.length > 0) {
      this.reviewBox = true
    } else {
      this.$message.error('请先选择店铺')
    }
  }
  init () {
    const { searchName, status, time } = this.form
    let myTime = time === null ? ['2000-01-01 00:00:00', ''] : time
    const params = {
      name: searchName,
      approveStatus: status,
      sdate: myTime[0],
      edate: myTime[1],
      pageIndex: this.currentPage - 1,
      pageSize: this.pageSize
    }
    this.initStoreReview(params).then(msg => {
      if (msg) {
        this.$message.error(msg)
      } else {
        const { data, total } = this.storeReview
        this.total = total
        this.tableData = data
      }
    }).catch(error => {
      this.$message.error(error)
    })
  }
}
</script>
<style lang="less">
  .draw-manage {
    .text-area-nopass {
      width: 80%;
      margin-top: 20px;
    }
    .nopass-reason {
      margin-top: 0;
    }
    .img {
      width: 100%;
      height: 80px;
      border: none;
    }
    .pic {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }
    .btn-box {
      display: flex;
      float: left;
    }
    .search-btn {
      float: left;
    }
    .more-con p {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .more-left {
      justify-content: flex-start !important;
    }
    .more-item {
      white-space: nowrap;
      width: 50%;
    }
    .review-box {
      text-align: center;
    }
    .action-bar {
      width: 100%;
      height: 44px;
      display: flex;
      align-items: center;
      font-size: 12px;
      span {
        color: #606266;
        cursor: pointer;
        display: flex;
        align-items: center;
      }
      i {
        font-size: 18px;
        margin-right: 5px;
      }
    }
    .date-picker {
      width: 400px;
    }
    .el-pagination {
      margin: 15px;
      text-align: center;
    }
    .btn {
      width: initial !important;
    }
    .draw-manage-query {
      padding-top: 15px;
      .el-form-item {
        float: left;
        margin-right: 15px;
        margin-bottom: 15px;
      }
      .el-form-item:last-child {
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .el-input {
        width: 180px;
      }
    }
  }
</style>
